<template>
    <m-navbar :isNeedBack="false" title="个人中心"/>
    <m-tabbar :activeId="4"/>
    <view class="content-wrap">
        <view class="w-full flex-justifyBetween-itemsCenter-box mt-12">
            <text class="iconfont icon-bianji mr-12" @click="toEditInfo"/>
            <text class="iconfont icon-tuichu mr-12" @click="showModal = true"/>
        </view>
        <view class="avatar-container w-full flex-col-box flex-justifyCenter-itemsCenter-box box-border">
            <image class="avatar rounded-full" :src="userInfo.avatarUrl"/>
            <view class="fz-16 mt-16">{{ userInfo.nickName }}</view>
        </view>
        <template v-if="userType === '2'">
            <view class="mx-10 flex-itemsCenter-box pr-10 rounded-8 info-box common-shadow py-14 box-border mt-16 mb-12 fz-13">
                <view class="icon-box">
                    <text class="iconfont icon-xueshi text-primary"/>
                </view>
                <text>学生：{{ userInfo.studentNickName || '--' }}</text>
            </view>
            <view class="mx-10 flex-itemsCenter-box pr-10 rounded-8 info-box common-shadow py-14 box-border mt-16 mb-12 fz-13">
                <view class="icon-box">
                    <text class="iconfont icon-banji text-primary"/>
                </view>
                <text>所在班级：{{ userInfo.className || '--' }}</text>
            </view>
        </template>
        <template v-else>
            <view class="mx-10 flex-itemsCenter-box pr-10 rounded-8 info-box common-shadow py-14 box-border mt-16 mb-12 fz-13">
                <view class="icon-box">
                    <text class="iconfont icon-xueshi text-primary"/>
                </view>
                <text>班级：{{ userInfo.studentName }}</text>
            </view>
        </template>
        <view class="mx-10 flex-itemsCenter-box pr-10 rounded-8 info-box common-shadow py-14 box-border mb-12 fz-13">
            <view class="icon-box">
                <text class="iconfont icon-shouji text-primary"/>
            </view>
            <text>手机号：{{ userInfo.phoneNum }}</text>
        </view>
        <view class="mx-10 flex-itemsCenter-box pr-10 rounded-8 info-box common-shadow py-14 box-border mb-18 fz-13">
            <view class="icon-box">
                <text class="iconfont icon-dizhi text-primary"/>
            </view>
            <text>地址：{{ userInfo.address ? (userInfo.address.length > 13 ? `${userInfo.address.substring(0, 12)}...` : userInfo.address) : '--' }}</text>
        </view>
        <view class="mx-10 flex-itemsCenter-box pr-10 rounded-8 info-box common-shadow py-14 box-border mb-18 fz-13">
            <view class="icon-box">
                <text class="iconfont icon-youxiang text-primary"/>
            </view>
            <text>邮箱：{{ userInfo.email || '--' }}</text>
        </view>
        <u-modal
            :show="showModal"
            :content="content"
            width="280px"
            title="提示"
            :showCancelButton="true"
            @confirm="confirm"
            @cancel="showModal = false"
        />
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { BASEURL } from '@/config'
import { onShow } from '@dcloudio/uni-app'

onShow(() => {
    initUserInfo()
})

const showModal = ref(false)

const content = ref('是否确认退出登录！')
const userType = ref('')

const userInfo = reactive({
	nickname: '',
	avatarUrl: '',
	studentName: '',
	phoneNum: '',
	trueName: '',
	address: '',
    email: ''
})

const initUserInfo = () => {
	const userInfoStorage = uni.getStorageSync('userInfo')
	userInfo.nickName = userInfoStorage.nickName
    userType.value = userInfoStorage.userType
    userInfo.studentNickName = userInfoStorage.studentNickName
	if (userInfoStorage.avatar) {
		userInfo.avatarUrl = `${BASEURL}/prod-api/${userInfoStorage.avatar}`
	}
    userInfo.className = userInfoStorage.className
	userInfo.address = userInfoStorage.address
	userInfo.phoneNum = userInfoStorage.phonenumber
	userInfo.email = userInfoStorage.email
}


// 修改资料
const toEditInfo = () => {
	uni.setStorageSync('editInfo', userInfo)
	uni.navigateTo({
		url: '/pages/editInfo/index'
	})
}

// 确认退出登录
const confirm = () => {
    uni.showToast({
        icon: 'loading',
        title: '退出中...'
    })
    showModal.value = false
    uni.clearStorageSync()
    setTimeout(() => {
        uni.hideToast()
        uni.navigateTo({
            url: '/pages/login/index'
        })
    }, 400)
}

const code = ref()
</script>

<style scoped lang="scss">
.avatar-container {
    height: 400rpx;

    & .avatar {
        width: 110px;
        height: 110px;
    }
}

.info-box {
    width: calc(100% - 20px);

    & .icon-chengji {
        font-size: 21px;
    }
}

.iconfont {
    font-size: 38rpx;
}

.icon-bianji, .icon-tuichu {
    font-size: 40rpx;
    color: black;
}

.icon-bianji {
    font-size: 38rpx;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 100%;
}
</style>
